<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr = [
        { id: "29", pid: "", name: "总裁办" },
        { id: "2c", pid: "", name: "财务部" },
        { id: "2d", pid: "2c", name: "财务核算部" },
        { id: "2f", pid: "2c", name: "薪资管理部" },
        { id: "d2", pid: "", name: "技术部" },
        { id: "d3", pid: "d2", name: "Java研发部" },
      ];
      //用一个方法去定义pidFromListToTree
      function pidFromListToTree(parms) {
        //定义一个对象obj为空
        const obj = {};
        //遍历arr数组里面的数据因为最后渲染的不能是没有优化成功的数组
        parms.forEach((item) => {
          //如果pid里面为''空则就会在在其后面定一个空的children数组
          if (!item.pid) {
            item.children = [];
          }
          // obj[item.id]意思是在遍历的arr里面找id 有id就加入到obj空对象里面,没有id就给item每一条加上id将 数据渲染成item一整条
          obj[item.id] = item;
        });
        console.log(obj);
        //定义个空数组newArr
        const newArr = [];
        // 在遍历一遍因为马上要找pid
        parms.forEach((item) => {
          //在obj里面找pid 有pid就将在拿出,没有就加pid属性 用parent
          const parent = obj[item.pid];
          //有parent指的是pid为'',parent能点children说名就是parent为''就会children里面加子数据
          if (parent) {
            parent.children.push(item);
            //没有就是相当于新的一项
          } else {
            newArr.push(item);
          }
        });
      }

      pidFromListToTree(arr);
      // [
      //   { id: '29', pid: '', name: '总裁办' },
      //   {
      //     id: '2c',
      //     pid: '',
      //     name: '财务部',
      //     children: [
      //       { id: '2d', pid: '2c', name: '财务核算部' },
      //       { id: '2f', pid: '2c', name: '薪资管理部' }
      //     ]
      //   },
      //   {
      //     id: 'd2',
      //     pid: '',
      //     name: '技术部',
      //     children: [{ id: 'd3', pid: 'd2', name: 'Java研发部' }]
      //   }
      // ]

      // 平铺转树多层
      export function transformListToTree2(arr, pid) {
        function recursion(pid) {
          const res = [];
          arr.forEach((item) => {
            if (item.pid === pid) {
              res.push(item);
              item.children = recursion(item.id);
            }
          });
          return res;
        }
        return recursion(pid);
      }
      transformListToTree2(arr, "");
    </script>
  </body>
</html>
